<template >
<div id="contentWarp">
	<!--顶部视图-->
	<div class="m_head" ref="m_head">
		<a class="header_item saoma"><img src="../../images/扫码.png"/></a>		
		<a class="header_item search_warp" @click="handleSearchBar">
			<img src="../../images/搜索.png" alt="" class="searchicon" />			
		</a>
		<a class="header_item headercategory">
			<img src="../../images/分类.png" alt=""  />			
		</a>
		<a class="header_item headUser">
			<img src="../../images/用户.png" alt=""  />	
				<a ref="quita" @click.prevent = "quitOrLogin" class="login_quita">{{islogin?"退出":"登录"}}</a>
		</a>
	</div>
	
	<!--弹出的搜索子页面  3个子组件-->
	<div class="search_allWarp" v-show="isShowSearch">
		<search ref="search" @addHistory="addHistory" @closeSearch="closeSearch"></search>
		<hotkey @addQuery="addQuery"></hotkey>
		<shistory ref="shistory"></shistory>
	</div>
	
	<!--首页轮播图-->
	<div class="swiper">
		<mt-swipe :auto="1000">
  			<mt-swipe-item v-for="(item,index) of imglist" :key="index"><img :src = "item" alt="" /></mt-swipe-item>
		</mt-swipe>
	</div>
	
	<div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for="(item,index) of categoryList" :key="index">
		            	<a @click="closeBar(item.id)">
		                    <span class="mui-icon "><img :src="iconlist[index]" alt="" /></span>
		                    <div class="mui-media-body">{{item.cate_name}}</div>
		                </a>
		            </li>		     
		        </ul> 
	</div>
	
	<div class="sectionWarp">
		<div class="sectionheader">
			<i class="sline"></i>
			<div class="seciton_thumbTxt">
				<img src="../../images/jinxuan.png" alt="" class="section_inblock"/>
				<i class="section_inblock section_txt">精选频道</i>
			</div>
			<i class="s_more section_inblock ">更多</i>		
		</div>			
		<div class="recomm_list" ref="personWrap">
    		<ul ref="personTab">
				<li v-for="(item,index) of recommList" :key=index @click="gotoDetail(item.id)">
					<a class="list_img" ><img :src="item.img_url"/></a>
    				<a class="list_text">{{item.title}}</a>
    				<span>{{item.market_price}}</span>
				</li>
    		</ul>
   		</div>	
	</div>
	
	<div class="sectionWarp bottom_10px">
		<div class="sectionheader">
			<i class="sline"></i>
			<div class="seciton_thumbTxt">
				<img src="../../images/jinxuan.png" alt="" class="section_inblock"/>
				<i class="section_inblock section_txt">猜你喜欢</i>
			</div>
			<i class="s_more section_inblock ">更多</i>		
		</div>			
		<div class="like_list">
    		<ul>
				<li v-for="(item,index) of recommList" :key=index>
					<a class="list_img"><img :src="item.img_url"/></a>
    				<a class="list_text" >{{item.title}}</a>
    				<span>{{item.market_price}}</span>
				</li>
    		</ul>
   		</div>	
	</div>
	
	
</div>
</template>

<script>
	import api from '../../api/api.js'
	import shopapi from '../../api/shop_api.js'
	import hotkey from  '../Common/searchHotKey.vue'
	import search from  '../Common/search.vue'
	import shistory from '../Common/searchHistory.vue'
	import local from '../../local/local.js'
	import BScroll from 'better-scroll'


	export default {
		data() {
			return {
				islogin:false,
				bannerlist:[],
				imglist:[],
				iconlist:[],
				categoryList:[],
				isShowSearch:false,	
				recommList:[],		
			};
		},
		
		methods:{
			personScroll() {
      // 默认有六个li子元素，每个子元素的宽度为120px
      			let width = 4 * 220;
      			this.$refs.personTab.style.width = width + "px";
      			// this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染
      			this.$nextTick(() => {
        		if (!this.scroll) {
          			this.scroll = new BScroll(this.$refs.personWrap, {
            		startX: 0,
            		click: true,
            		scrollX: true,
            		// 忽略竖直方向的滚动
            		scrollY: false,
            		eventPassthrough: "vertical"
          		});
        		}else{
          				this.scroll.refresh();
        			}
      			});
    		},
    		scrollBody(){
    			this.$refs.m_head.style.background =  this.changeOpacityColor(100,120+44);
    		},
			quitOrLogin(){
				if(this.islogin){
					this.islogin = false;
					this.$store.isLogin = false;
					local.quitUser();
				}
				else{
					this.$router.push({name:'login'})
				}							
			},
			handleSearchBar(){
				this.isShowSearch = true;
			},
			addQuery(item){
			//直接调用子组件输入框的方法
				this.$refs.search.addQuery(item);
				this.$refs.shistory.saveToHistory(item.name);
			},
			addHistory(item){
				this.$refs.shistory.saveToHistory(item);
			},
			closeSearch(){				
				this.isShowSearch = false;
			},
			closeBar(itemId){
				this.$router.push({name: 'typeList', params:{cate_id:itemId}});
				this.$store.state.showBottomTab = false;
			},
			gotoDetail(itemId){
				this.$router.push({name: 'productDetail', params:{id:27}});
				this.$store.state.showBottomTab = false;
			}
		},
		components:{
			hotkey,
			search,
			shistory
		},
		created(){
		

			if(local.getUserInfo() == undefined || local.getUserInfo() == null){
				this.$store.isLogin = false;
				this.islogin = false;
			}
			else{
				this.$store.isLogin = true;
				this.islogin = true;
			}
		},
		mounted(){
			console.log('mounted');
			window.addEventListener('scroll', this.scrollBody);
			
			this.personScroll();
			var that = this;
			api.home.bannerList().then((res)=>{

				that.bannerlist = res.data;
				that.imglist = ['https://gdp.alicdn.com/imgextra/i1/2215777223/TB2UkizcpXXXXcvXXXXXXXXXXXX_!!2215777223.jpg',
				'https://gdp.alicdn.com/imgextra/i1/2215777223/TB2UkizcpXXXXcvXXXXXXXXXXXX_!!2215777223.jpg',
				'https://gdp.alicdn.com/imgextra/i1/2215777223/TB2UkizcpXXXXcvXXXXXXXXXXXX_!!2215777223.jpg',
				'https://gdp.alicdn.com/imgextra/i1/2215777223/TB2UkizcpXXXXcvXXXXXXXXXXXX_!!2215777223.jpg'];
			});
			api.home.topCategory().then((res)=>{	

				if(res.ret == 200){
					if(res.data){
						that.iconlist = ["../../images/icon1.png","../../images/icon2.png","../../images/icon3.png","../../images/icon4.png","../../images/icon5.png","../../images/icon6.png","../../images/icon7.png","../../images/icon8.png"];
						that.categoryList = res.data;						
					}
				}
			});
			
			shopapi.recom.getRecomm().then((res)=>{
				console.log(res);
				if(res.status == 0 && res.message){
					that.recommList = res.message;
				}
			})
			
//			api.product.goodsList('15').then((res)=>{
//				console.log('goods'+JSON.stringify(res.data));
//			})
		},
		beforeDestroy(){
			window.removeEventListener('scroll', this.scrollBody);	
		}
	
	}
</script>

<style lang="css" scoped>
/*.topSearchWarp{position: fixed;height: 2.3px;}
.leftsao{}*/
.m_head{background: rgba(255,255,255,0);}
.header_item{display: block;float: left;margin-left: 0rem;}
.saoma{width:0.4rem;height: 0.4rem;}
.saoma>img{width:0.4rem;height: 0.4rem;margin-left: .2rem;}

.search_header{height: auto;overflow: hidden;}
.search_warp{border-radius: 0.04rem;border: .02rem solid rgba(0,0,0,.4);width: 4.2rem;height: 0.43rem;background: #F3F3F3;margin-left: .6rem;margin-top: .32rem;position: relative;overflow: hidden;}
.search_warp img.searchicon{width: 0.34rem;height: 0.34rem;position: absolute;left: .1rem;top:.04rem}
.search_warp.searchInput{border: none;outline: none;width: 2rem;margin-left: .4rem;background: none;color: #333333;font-size: .2rem;}

.headercategory img{width:0.4rem;height: .4rem;margin-left: .3rem;}
.headUser img{width:0.4rem;height: .4rem;margin-left: .3rem;}
.login_quita{font-size: .2rem;width: .3rem;height: .3rem;color: #F3F3F3;}


.prev{background:#333 ;}
.prev1{background:#333 ;}
.search_allWarp{z-index: 100;height: auto;position: absolute;top: 0;left: 0;width: 100%;background: #fff;min-height: 150%;height: auto;}
.searchAllInput{width: 3.2rem;margin-left: .2rem;margin-top:.2rem;height: .4rem;}
.serachBar{border: none;resize: none;width: 2.5rem;height: .4rem;font-size: .2rem;line-height: .4rem;margin-left: .4rem;background: none;}

.clear { display: none; position: absolute; width: .3rem; height: .3rem; margin:1.2rem 0 0 -3.2rem; background: url('../../images/clear.png');background-size:2rem}
.searchAllInput::-ms-clear { display: none; }
.searchAllInput:valid + .clear { display: inline; }
.mui-icon>img{width: 0.8rem;height: 0.8rem;}

 /*推荐标题*/
.sectionWarp{height: auto;overflow: hidden;background:  #fff;}
.sectionheader{width:100%;height: .8rem;position: relative;background:#fff;}
.sectionheader .sline {width: 3rem;height: .02rem;background: rgba(0,0,0,.5);position: absolute;top:.6rem;left: 2.2rem;}
.seciton_thumbTxt{min-width: 1.4rem;width: 1.4rem;margin: 0 auto;background: #fff;height: 1rem;position: relative;}
.seciton_thumbTxt img{width: 0.3rem;height: 0.3rem;}
.seciton_thumbTxt.stitle{width: auto;height: 1.2rem;}
.section_inblock{display: inline-block;vertical-align: middle;}
.section_txt{line-height: 1.2rem;font-size: .22rem;font-weight: 200;color: #333;}
.s_more{font-size: .26rem;color: #333;width: .6rem;height: .5rem;line-height: .5rem;position: absolute;top:.35rem;right: .42rem;}

/*推荐横向滚动列表*/
.recomm_list{overflow: hidden;width: 6.8rem;margin-left: .3rem;margin-top: .4rem;height: 3.1rem;}
.recomm_list li{float: left;width: 1.41rem;margin-left: .2rem;margin-bottom: .4rem;}
.recomm_list li a.list_img{display: block;width: 1.4rem;height: 1.4rem;margin-bottom: .2rem;}
.recomm_list li img{border:1px solid rgba(0,0,0,.2);width: 1.4rem;height: 1.4rem; }
.recomm_list li a.list_text{overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2; width: 1.4rem;height: .8rem;line-height: .4rem;font-size: .25rem;color: #222222;}
.recomm_list li span{color:#EC971F;display: block;width: 1.2rem;height: .3rem;margin-top: .2rem;}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* 3. */
   .recomm_list li a.list_text{overflow:hidden; text-overflow:ellipsis;display:block; -webkit-box-orient:vertical;-webkit-line-clamp:0; }/* IE10+ */
}

/*猜你喜欢*/
.like_list{overflow: hidden;width: 6.4rem;margin-left: .3rem;margin-top: .4rem;}
.like_list li{float: left;width: 2.5rem;margin-left: .6rem;margin-bottom: .4rem;}
.like_list li a.list_img{display: block;width: 2.5rem;height: 2.5rem;margin-bottom: .2rem;}
.like_list li img{border:1px solid rgba(0,0,0,.2);width: 2.5rem;height: 2.5rem; }
.like_list li a.list_text{overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2; width: 2.5rem;height: .8rem;line-height: .4rem;font-size: .25rem;color: #222222;}
.like_list li span{color:#EC971F;display: block;width: 1.2rem;height: .3rem;margin-top: .2rem;}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* 3. */
   .like_list li a.list_text{overflow:hidden; text-overflow:ellipsis;display:block; -webkit-box-orient:vertical;-webkit-line-clamp:0; }/* IE10+ */
}
.bottom_10px{padding-bottom: .6rem;}
</style>